<template>
  <div>
    <div class="login_top clearfix">
      <a class="login_logo"><img src="../static/images/logo02.png"></a>
    </div>

    <div class="login_form_bg">
      <div class="login_form_wrap">
        <div class="login_banner fl"></div>
        <div class="slogan fl">日夜兼程 · 急速送达</div>
        <div class="login_form fr">
          <div class="login_title clearfix">
            <h1>用户登录</h1>
            <a href="#">立即注册</a>
          </div>
          <div class="form_input">
            <input type="text" v-model="username" @blur="checkUserName" class="name_input" placeholder="请输入用户名">
            <div class="user_error" ref="errorMsg" v-show="showUserError">{{userErrorMsg}}</div>
            <input type="password" v-model="pwd" @blur="checkPsw" class="pass_input" placeholder="请输入密码">
            <div class="pwd_error" v-show="showPswError">{{pswErrorMsg}}</div>
            <div class="more_input clearfix">
              <input type="checkbox" name="">
              <label>记住用户名</label>
              <a href="#">忘记密码</a>
            </div>
            <input type="submit" name="" value="登录" class="input_submit" @click="submit">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  var qs = require('qs');
  export default {
    name: "Login",
    data() {
      return {
        showUserError: false,
        userErrorMsg: "错误",
        showPswError: false,
        pswErrorMsg: '错误',
        username: '',
        pwd: ''
      }
    },
    methods: {
      submit() {
        if (this.checkPsw() & this.checkUserName()) {
          var url = "http://127.0.0.1:8000/user/login_handler";
          this.$axios.post(url, qs.stringify( {
            username: this.username,
            pwd: this.pwd
          })).then(function (response) {
              if (response.data.code == -1) {
                alert(response.data.msg)
              } else {
                alert("登陆成功")
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }
      },
      checkUserName() {
        // this.$refs.errorMsg.style.color = 'blue'
        if (this.username.length == 0) {
          this.showUserError = true
          this.userErrorMsg = '账号长度不能小于8位'
          return false
        }

        // var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
        // var phone = this.username;
        // if (!phoneReg.test(phone)) {
        //   this.showUserError = true
        //   this.userErrorMsg = '请输入有效的手机号'
        //   return false;
        // }
        this.showUserError = false
        return true
      },
      checkPsw() {
        if (this.pwd.length == 0) {
          this.showPswError = true
          this.pswErrorMsg = '请输入密码'
          return false
        }
        if (this.pwd.length < 8) {
          this.showPswError = true
          this.pswErrorMsg = '密码位数不能小于8位'
          return false;
        }
        this.showPswError = false
        return true
      }
    }
  }
</script>

<style scoped>
  @import '../static/css/login.css';
  /*引入公共样式*/
  @import "./../static/css/reset.css";

</style>
